<template>
    <lay-layer v-model="layer_show" :title="layer_title" :area="['800px', '300px']" :moveOut="true" :resize="true"
        :end="end" :close="close" :beforeClose="beforeClose">
        <lay-card>
            <lay-table :columns="columns" :dataSource="table_db.detail" size="sm">
                <template #id="{ data }">{{ data.id }}</template>
                <template #name="{ data }">{{ data.name }}</template>
                <template #barcode="{ data }">{{ data.barcode }}</template>
                <template #unit="{ data }">{{ data.unit }}</template>
                <template #unit_pack="{ data }">{{ data.unit_pack.mp }}</template>
                <template #dbid="{ data }">{{ data.dbid }}</template>
                <template #operator="{ data }"><lay-button border="green" border-style="dashed" size="xs"
                        @click="select(data)">选择</lay-button></template>
            </lay-table>
        </lay-card>
    </lay-layer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const emit = defineEmits(['topClick']);
const layer_title = ref('项目选择');//弹窗标题
const layer_show = ref(false);// 弹窗显示

// 表格列配置
const columns = [
    { title: "序号", width: "50px", type: "number" },
    {
        title: "id",
        width: "60px",
        key: "id",
        customSlot: "id",
        align: "center",
    },
    {
        title: "条码",
        width: "150px",
        key: "barcode",
        customSlot: "barcode",
        align: "center",
    },
    {
        title: "名称",
        width: "150px",
        key: "name",
        customSlot: "name",
        align: "center",
    },
    {
        title: "单位",
        width: "60px",
        key: "unit",
        customSlot: "unit",
        align: "center",
    },
    {
        title: "大单位",
        width: "57px",
        key: "unit_pack",
        customSlot: "unit_pack",
        align: "center",
    },
    {
        title: "系统编码",
        width: "210px",
        key: "dbid",
        customSlot: "dbid",
        align: "center",
    },

    {
        title: "操作",
        width: "50px",
        customSlot: "operator",
        key: "operator",
        align: "center",
        fixed: "right",
    },
];


// 行选择按钮点击
function select(res: any) {
    // console.log("行选择按钮点击", res);
    emit('topClick', table_db.value.head.table_db_item_id, res);
    table_db.value.detail = [];
    layer_show.value = !layer_show.value;
};

// 表格内容
const table_db = ref({
    "head": {
        "table_db_item_id": -1,//上级表格行的ID---仅限前端数组包装使用与后端无关
    },
    "detail": [
        {
            "id": 0,//仅限前端数组包装使用与后端无关
            "barcode": "条码",//条码
            "name": "名称",//名称
            "unit": "单位",//单位
            "unit_pack": { 'val': 'B', 'mp': '否', 'txt': '是否大单位' },//是否大单位
            "dbid": "商品数据编号",//商品数据编号
        },
        {
            "id": 1,//仅限前端数组包装使用与后端无关
            "barcode": "条码",//条码
            "name": "名称",//名称
            "unit": "单位",//单位
            "unit_pack": { 'val': 'B', 'mp': '否', 'txt': '是否大单位' },//是否大单位
            "dbid": "商品数据编号",//商品数据编号
        }
    ]
});


const goodsx_fnx = (table_db_item_id: number, data: any) => {
    // console.log("接收上级数据", table_db_item_id, data);
    layer_show.value = !layer_show.value;
    table_db.value.head.table_db_item_id = table_db_item_id;//上级表格行的ID---仅限前端数组包装使用与后端无关
    table_db.value.detail = data;//上级传来可选择的数据行
};



// 窗口关闭前置
const beforeClose = () => {
    // console.log("1`窗口关闭前置");
    layer_show.value = !layer_show.value;
};
// 窗口关闭
const close = () => {
    // console.log("2`窗口关闭");
};
// 窗口销毁
const end = () => {
    // console.log("3`窗口销毁");
};
//向父组件暴露子组件的方法或者数据
defineExpose({ goodsx_fnx, });
</script>